<template>

	<view class="page-wapper ">
		<view class="" style="height: 44rpx;">

		</view>
		<view class="status-bar">

		</view>


		<view class="titleinfo-wapper ss-flex-col ss-col-center">
			<image src="/static/logo1.jpg" class="logo" mode="heightFix"></image>
			<view class="title">
				欢迎登录福运精选
			</view>
		</view>
		<view class="bottom-wapper">
			<u-form ref="formdom" label-position="top" errorType="toast" style="margin-top:30rpx;padding: 0 53rpx;"
				:model="state.formdata" :rules="rules">

				<u-form-item prop="mobile">
					<view class="login_input">
						<image src="/static/icon_amount.png" class="lefticon" mode="heightFix"></image>
						<input class="back_1 flex-1" v-model="state.formdata.mobile" maxlength="11"
							placeholder="请输入手机号" />

					</view>

				</u-form-item>
				<u-form-item prop="password" v-if="!state.iscode">
					<view class="login_input">
						<image src="/static/icon_password.png" class="lefticon" mode="heightFix"></image>
						<input class="back_1" type="password" v-model="state.formdata.password" placeholder="请输入密码" />

					</view>

				</u-form-item>

				<u-form-item prop="code" v-if="state.iscode">
					<view class="login_input">
						<image src="/static/icon_password.png" class="lefticon" mode="heightFix"></image>
						<input class="back_1" type="text" v-model="state.formdata.code" placeholder="验证码" />

						<view class="code-button" @tap="getCode">
							{{state.tips}}
						</view>

					</view>

				</u-form-item>





			</u-form>
			<view class="ss-flex ss-col-center" style="margin-top: 30rpx;">
				<view class="chack-wapper ss-flex ss-row-center">
					<image :src="state.agreen?'/static/icon_checked.png':'/static/icon_check.png' "
						@tap="state.agreen=!state.agreen" class="checkicon" mode=""></image>已阅读并同意<span
						@tap="richtextPop1.open({id:'yhxy',title:'福运精选相关协议'})">《福运精选相关协议》</span>
				</view>
				<view class="forget">

					<span @tap="state.iscode=!state.iscode">{{!state.iscode?'验证码登录':'密码登录'}}</span>
				</view>
			</view>



		</view>





		<view style="padding: 0 50rpx;">
			<button class="logo-button" @tap="onsubmit">登录 </button>
		</view>

		<view class="qzc">
			还没有账号？<span @tap="LC.$router.go('/pages/auth/res',true)">立即注册</span>
		</view>
		<u-code :seconds="60" ref="codedom" @change="codeChange"></u-code>

		<!-- <view class="grey_1 b_buttom center_between">
			<span @tap="kf">{{$t('zxkf')}}</span>
			<span @tap="LC.$router.go('/pages/login/forget')">{{$t('wjmm')}}？</span>
		</view> -->
		<!-- 	<view class="bottom_tip grey_2">
			<view class="trid ss-flex-col ss-col-center">
				<view class="title">
					<span class="line"></span>
					<span>or</span>
					<span class="line"></span>
				</view>
				<view class="trid_login ss-flex ss-row-between">
					
					<view class="item ">
						<image src="@/static/icon_apple.png" mode=""></image>
						
					</view>
					<view class="item ">
						<image src="@/static/icon_google.png" mode=""></image>
						
					</view>
					<view class="item ">
						<image src="@/static/icon_facebook.png" mode=""></image>
						
					</view>
				
				</view>
			</view>
		
		</view>
	 -->
		<richtextPop ref="richtextPop1"></richtextPop>
	</view>
</template>

<script setup>
	import richtextPop from './richtext_pop.vue'
	import LC from '@/LC'
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app'

	import {
		openkf
	} from '../../utils/kf.js';



	import {
		ref,
		reactive,
		computed,
		onMounted
	} from 'vue'
	let info = computed(() => LC.$store('app').info)
	let richtextPop1 = ref(null)


	onLoad(({
		share
	}) => {
		if (share) {
			LC.$store('user').share_id = share
		}
	})


	const rules = {
		mobile: [{
				required: true,
				message: '请输入手机号',
				trigger: ['blur', 'change']
			},
			{
				validator: (rule, value, callback) => {
					// 上面有说，返回true表示校验通过，返回false表示不通过
					// uni.$u.test.mobile()就是返回true或者false的
					return uni.$u.test.mobile(value);
				},
				message: "手机号格式不正确",
				trigger: ['blur', 'change']
			}
		],
		password: [{
				required: true,
				message: '请输入密码',
				trigger: ['blur', 'change']
			},
			{
				min: 6,
				max: 10,
				message: "长度6-10位",
				trigger: ['blur', 'change']
			}
		],
		code: [{
			required: true,
			message: '请输入验证码',
			trigger: ['blur', 'change']
		}]
	}


	function changetab({
		index
	}) {

		state.logintype = list1.value[index].value
	}

	//表单
	let state = reactive({

		agreen: false,
		tips: {},
		iscode: false,
		formdata: {
			mobile: "",
			password: '',
			code: '',
		},

	})

	let formdom = ref(null)

	function tochangeArea() {
		uni.$once("selectAreacode", function(a) {
			state.formdata.area_code = a
		})
		LC.$router.go('/pages/auth/areachange')
	}

	function onsubmit() {
		if (!state.agreen) {
			uni.$u.toast('请勾选协议')
			return
		}
		formdom.value.validate().then(res => {
			send()
		}).catch(err => {
			formdom.value.clearValidate()

			console.log('表单错误信息：', err);
		})
	}
	async function send() {
		if (state.iscode) {
			const res = await LC.$api.user.mobilelogin(state.formdata)
			if (res.code == 1) {
				LC.$store('user').setToken(res.data.token)
				uni.reLaunch({
					url: '/pages/index/index',
					success() {
						// uni.$u.toast(bitApp.$t('cg12'))
					}
				})
			}
			return
		}
		const res = await LC.$api.user.login(state.formdata)
		if (res.code == 1) {
		LC.$store('user').setToken(res.data.token)
		uni.reLaunch({
			url: '/pages/index/index',
			success() {
				uni.$u.toast('成功')
			}
		})
		}



	}
	let inputtype = ref('password')

	function clearevent(b) {
		formData[b] = ''
	}

	function codeChange(text) {

		state.tips = text;
	}

	function changePasswordView() {
		inputtype.value = inputtype.value === 'password' ? 'text' : 'password'

	}

	function tolangset() {
		LC.$router.go('/pages/user/langset')

	}

	function kf() {
		openkf()
	}
	
	
	
	
	
	
	
	
	
	
	
	let codedom = ref(null)
	
	async function getCode() {
	
		if (codedom.value.canGetCode) {
			// 模拟向后端请求验证码
			uni.showLoading({
	
			})
			await LC.$api.user.smssend({
				mobile: state.formdata.mobile,
				event: 'mobilelogin'
			})
			codedom.value.start();
			uni.hideLoading({
	
			})
		} else {
			uni.hideLoading({
	
			})
	
		}
	
	
	
	
	}
</script>

<style lang="scss">
	.bottom-wapper {
		background: #fff;
		border-radius: 82rpx 82rpx 0px 0px;
		position: relative;
		margin-top: 80rpx;
		padding: 46rpx 0px;
	}

	.logo-button {


		height: 86rpx;

		margin-bottom: 59rpx;
		flex-shrink: 0;
		margin-top: auto;
		background: linear-gradient( 90deg, #FB5351 0%, #FF7352 100%);;
		border-radius: 42px;
		font-weight: 400;
		font-size: 27rpx;
		width: 100%;
		line-height: 86rpx;
		color: #fff;
		margin-top: 73rpx;

		&.dis {
			background-color: #CCCCCC;
		}

		&::after {
			display: none;
		}


	}

	.chack-wapper {
		.checkicon {
			width: 34rpx;
			height: 34rpx;
			margin-right: 15rpx;
		}

		padding: 0 50rpx;
		font-family: PingFangSC,
		PingFang SC;
		font-weight: 400;
		font-size: 23rpx;
		color: #999999;
		line-height: 32rpx;

		span {
			color: #FC5652;
		}

	}

	.forget {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 23rpx;
		color: #afafaf;

		line-height: 32rpx;
		text-align: left;
		display: flex;
		padding: 0 50rpx;
		justify-content: flex-end;
	}

	.page-wapper {
		min-height: 100vh;
		/*給 Safari 以外的瀏覽器讀取*/

		display: flex;
		background: url('/static/loginbg.jpg');
		padding-bottom: 1rpx;
		flex-direction: column;
		background-color: #fff;

		background-repeat: no-repeat;
		background-size: 100vw 527rpx;
	}

	.top_icon {
		padding: 0 30rpx;
		box-sizing: border-box;

		.icon {
			width: 46rpx;
			height: 46rpx;
			margin-left: 48rpx;
		}

	}

	.titleinfo-wapper {
		padding: 17rpx 59rpx;

		.logo {
			width: 273rpx;
			height: 226rpx;
		}

		.title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 800;

			margin-top: 40rpx;
			line-height: 32rpx;
		}
	}

	.qzc {
		display: flex;
		justify-content: center;
		font-size: 23rpx;
		font-weight: 400;

		color: #999999;
		line-height: 32rpx;

		span {
			color: #FC5652;
			text-decoration: underline;
		}
	}

	.titlephone {
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 31rpx;
		color: #131313;
		line-height: 42rpx;
		margin-bottom: 60rpx;
	}

	::v-deep.uni-forms-item {
		margin-bottom: 60rpx;

	}


	::v-deep .uni-forms {
		margin: 0rpx 0;
	}

	.login_input {
		display: flex;
		width: 100%;
		height: 86rpx;
		align-items: center;
		padding: 0 50rpx;
		box-sizing: border-box;
		background: #fff;
		border-radius: 63rpx;
		opacity: 1;
		border: 2rpx solid #dadbde;

		.lefticon {
			height: 32rpx;
			width: 32rpx;
			// u-icon {
			// 	margin-left: 5rpx;
			// }
		}

		input {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 27rpx;
			color: #999999;
			line-height: 38rpx;
			margin-left: 15rpx;
			flex: 1
		}


	}

	.b_buttom {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		margin-top: 38rpx;
	}

	.title {
		margin-top: 60rpx;
		font-size: 48rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		color: #292929;
		line-height: 66rpx;

		.subtitle {
			font-size: 28rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #9FA4A0;
		}
	}

	.tab {
		display: flex;
	}

	.tab_item {
		padding-right: 60rpx;
		color: #9FA4A0;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		display: flex;
		flex-direction: column;
		align-items: center;

		&>span:nth-child(2) {
			margin-top: 6rpx;
			display: none;
			width: 32rpx;
			height: 8rpx;
			background: #00807D;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			opacity: 1;

		}
	}

	.tab_isactive {
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #00807D;

		&>span:nth-child(2) {
			display: block;


		}

	}

	.login-buttom {
		height: 112rpx;
		background: linear-gradient(270deg, #09AA8C 0%, #00807D 100%);
		border-radius: 160rpx 160rpx 160rpx 160rpx;
		font-size: 32rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 112rpx;

	}

	.top_tittle {
		height: 88rpx;

		.left {
			width: 56rpx;
			height: 56rpx;
		}

		.right {
			image {
				width: 46rpx;
				height: 46rpx;
				margin-right: 5rpx;
			}

			font-size: 36rpx;
			font-family: DINPro-Medium,
			DINPro;
			font-weight: 500;
		}
	}
</style>